<script setup>
function submit() {
  const from = document.getElementById("form");
  const formData = new FormData(form);
  const chats = formData.get("words").trim();
  const name = formData.get("word-name").trim();
  let c = "";
  if (chats) {
    new Set(chats.split("")).forEach((v) => {
      c += v;
    });
  }
  if (c) {
    const whireFile = async () => {
      const title = document.getElementById("title");
      title.innerText = "加载中...... 请等待";
      title.style.color = "red";
      const [fileHider] = await window.showOpenFilePicker();
      const file = await fileHider.getFile();
      const writable = await fileHider.createWritable();
      await writable.write(
        `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>字蛛-压缩字体包</title><style>@font-face{font-family:${name};src: url("./fonts/${name}.TTF")}</style></head><body><div style="font-family: ${name};">${c}</div></body></html>`
      );
      await writable.close();
      title.innerText = " 字蛛-压缩字体包";
      setTimeout(() => {
        alert("加载完成");
      }, 300);
    };
    whireFile();
  } else {
    alert("请输入有效字符");
  }
}
</script>

<template>
  <div id="title" class="title">字蛛-压缩字体包.TTF</div>
  <form id="form">
    <button class="rst" type="reset">清空</button>
    <input class="name" name="word-name" placeholder="请输入字体包名称" />
    <textarea id="words" name="words" placeholder="请输入需要的文字"></textarea>
  </form>
  <div>
    <button class="btn" v-on:click="submit">提交</button>
  </div>
</template>

